<template>
  <div class="home">
    <heade-box></heade-box>
    <!-- 第一个列表和tab栏 -->
    <section>
      <tabs :values="categoryList" @change="handleTab"></tabs>
      <!-- 列表 -->
      <pull-list>
        <list :options="articleOptions">
          <template slot-scope="{ list }">
            <articleItem v-for="(item, index) in list" :key="index" :item="item"></articleItem>
          </template>
        </list>
      </pull-list>
    </section>
    <!-- 第二个列表和tab栏 -->
    <section>
      <tabs :values="topicTab" @change="handleTab"></tabs>
      <pull-list>
        <list :options="topicOptions">
          <template slot-scope="{ list }">
            <articleItem v-for="(item, index) in list" :key="index" :item="item"></articleItem>
          </template>
        </list>
      </pull-list>
    </section>
  </div>
</template>

<script>
// @ is an alias to /src
import HeadeBox from '@/components/Heade/Heade.vue'
import Tabs from '@/components/Tab/Tabs.vue'
import PullList from '@/components/List/PullList.vue'
import List from '@/components/List/List.vue'
import ArticleItem from '@/components/Item/ArticleItem.vue'
import queryCategory from '@/mixins/category'
import pagenation from '@/mixins/pagenation'

export default {
  name: 'Home',
  components: {
    HeadeBox,
    Tabs,
    PullList,
    List,
    ArticleItem
  },
  mixins: [queryCategory, pagenation],
  provide () {
    return {
      processList: this.processList
    }
  },
  data () {
    return {
      topicTab: [],
      articleOptions: {
        url: '/list',
        reload: this.reload,
        queryParam: {
          type: 'article',
          id: 1,
          search: ''
        },
        ipagination: {
          pageNo: 2
        }
      },
      topicOptions: {
        url: '/list',
        reload: this.reload,
        queryParam: {
          type: 'topic',
          id: 1,
        }
      }
    }
  },
  async created () {
    setTimeout(() => {
      this.articleOptions.queryParam.search = '搜索'
      console.log('异步', this.stack, this.current, this.uid)
    }, 1000)
    console.log('api', this.$api)
    this.categoryList = await this.queryCategory(this.$api.home.URL_CATEGORY, { id: 66 })
    this.topicTab = await this.queryCategory(this.$api.home.URL_CATEGORY, { id: 88 })
    console.log('topicTab', this.topicTab, 'categoryList', this.categoryList)
  },
  methods: {
    handleTab (val) {
      console.log('handleTab', val)
    },
    /**
     * 处理响应数据 封装成对应的数据格式
     * data 响应数据
     * instance 对应的列表实例
     */
    processList (data, instance) {
      console.log('会覆盖吗', data)
      instance.dataSource = data
    }
  }
}
</script>
